<template>
    <div>
        <!-- 上拉图标 -->
        <pull-up></pull-up>
        <div class="mui-content mui-scroll-wrapper mui-slider-group" >
            <div class="mui-scroll">
                <div class="carInfo">
                    <!-- <div class="swiper-container swiper-cont">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="static/img/lun1.jpg" />
                            </div>
                            <div class="swiper-slide">
                                <img src="static/img/lun2.jpg" />
                            </div>
                            <div class="swiper-slide">
                                <img src="static/img/lun3.jpg" />
                            </div>
                            <div class="swiper-slide">
                                <img src="static/img/lun4.jpg" />
                            </div>
                        </div>
                        <div class="swiper-pagination" ></div>
                    </div> -->
                     <!--轮播-->
                    <swip-public></swip-public>
                    <!-- 热门资讯 -->
                    <div class="info-list">
                        <div class="info-top">
                            <span style="float:left;">热门资讯</span>
                            <span style="float:right;color:#666666;" @tap="intoMoreInfo">更多<span class="icon-1" style="font-weight: 600; position: relative; left: 2px; top: 1px;"></span></span>
                        </div>
                        <div class="info-tab">
                            <ul>
                                <li v-for="(v,i) in carInfoList">
                                    <div class="tab-item" v-show="i<6" @tap="goCarInfoDetail(v)">
                                        <div class="tab-item-left">
                                            <!-- <P style="margin-bottom:0px">{{v.title}}</p> -->
                                            <div class="shortContent">{{v.title}}</div>
                                            <!-- <div class="shortContent">{{v.shortContent}}</div> -->
                                            <p><span style="color:#cc9f68;background:#F7F2F0;padding:5px;border-radius:5px;">周边生活</span><span style="float:right;">{{formatTime(v.createTimeInt)}}</span></p>
                                        </div>
                                        <div class="tab-item-right">
                                            <img v-lazy="$store.state.appData.imgUrl+v.pic" >
                                        </div>
                                    </div>
                                </li>
                            </ul>                
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    //import Swiper from 'static/js/swiper'
    import mui from 'static/js/mui'
    import pullUp from '@/components/base/pull-up/pull-up'
    import utils from '@/utils/utils'
    import {getNewsPage} from '@/nodeApi/config'
    import swipPublic from '@/components/base/swip-public/swip-public'
    export default {
        data() {
        return {
            carInfoList:[
            ],
            pageObj:{
                pageNow: 1,
                pageSize: 5
            }
        }
    },
    created() {
        this.handelGetNews()
    },
    mounted() {
      //swip
      /* var mySwiper = new Swiper ('.swiper-cont', {
         autoplay: false,//可选选项，自动滑动
        // 如果需要分页器
        pagination:{
            el: '.swiper-pagination'
        }
      }) */

      //竖向滚动
      mui.init();
      scroll =mui('.mui-scroll-wrapper').scroll({
        scrollY: true, //是否竖向滚动
        scrollX: false, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: false, //是否显示滚动条
        deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: true //是否启用回弹
      });
    },
    //注意销毁掉监听，不然报错
    destroyed () {},
    components: {pullUp, swipPublic},
    methods: {
        intoMoreInfo(){
            this.$router.push({
                path: "/find",
            })
        },
        goCarInfoDetail(v){
            this.$router.push({
                name: "carInfoDetail",
                params: {
                    news:v
                }
            })
        },
        handelGetNews() {
            getNewsPage(this.pageObj).then(res =>{
                this.carInfoList = res.data.news
            })
        },
        formatTime(time){
            try{
                return utils.time.formatDatetwo(time)
                }catch(e){
                '逻辑错误，期货拼单历史返回问题'
            }
        },

    }
  }
</script>

<style lang="scss" scoped>
    @import '~static/css/swiper.css';
    .mui-scroll-wrapper {
        position: absolute;
        z-index: 2;
        top: 44px;
        bottom: 0;
        left: 0;
        overflow: hidden;
        width: 100%;
    }
    .mui-bar-nav ~ .mui-content {
         padding-top: 0px; 
         padding-bottom:50px;
    }
    .swiper-slide{
        height:auto;
    }
    .swiper-slide img{
        width:100%;height:100%;
    }
    /*热门资讯*/
    p{
      color:#333333;
    }
    .info-list{
        width:100%;
        height:auto;
        margin-bottom:60px;
        .info-top{
            overflow:hidden;
            background:#fff;
            color:#333333;
            font-size:0.7rem;
            padding:8px 12px  8px 12px;
            border-bottom:1px solid #e9e9e9;
        }
        .info-tab{
            ul li{
                border-bottom:1px solid #e9e9e9;
                .tab-item{
                    width:100%;
                    background:#fff;
                    overflow:hidden;
                    padding:12px 12px 12px 12px;
                    .tab-item-left{
                        float:left;
                        width:58%;
                        height:90px;
                        .shortContent{
                            width:100%;
                            margin-bottom: 10px;
                            height:40px;
                            font-size:0.6rem;
                            word-break: break-all;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            //white-space: nowrap;    
                        }
                        p{
                            font-size:12px;
                        }
                    }
                    .tab-item-right{
                        float:right;
                        width:42%;
                         height:90px; 
                        text-align:right;
                        img{
                            height:100%;
                        }
                    }
                }
            }
        }
    }
</style>